<template>
  <AppPage>
    <div ref="canvas" bg-hex-000></div>
  </AppPage>
</template>

<script setup lang="ts">
import * as THREE from 'three'

const canvas = ref<HTMLElement | null>(null)

// 要素1：场景
const scene = new THREE.Scene()

// 要素2：物体
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 'red', wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
// mesh.position.set(1, 1, 1)
// mesh.scale.set(0.5, 2, 1.5)
// mesh.rotation.reorder('YXZ')
// mesh.rotation.set(Math.PI / 4, Math.PI / 4, Math.PI / 4)

const mesh2 = new THREE.Mesh(geometry, material)
mesh2.position.set(1.5, 1.5, 1)

const meshGroup = new THREE.Group()
meshGroup.position.set(1, 1, -1)

meshGroup.add(mesh)
meshGroup.add(mesh2)
scene.add(meshGroup)
console.log(canvas.value)

// 要素3：相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight)
camera.position.set(2.5, 2, 5)
scene.add(camera)

camera.lookAt(meshGroup.position)

// 要素4：渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

// 坐标轴
const axesHelper = new THREE.AxesHelper(3)
scene.add(axesHelper)

// function animate() {
//   requestAnimationFrame(animate)

//   mesh.rotation.x += 0.01
//   mesh.rotation.y += 0.01

//   renderer.render(scene, camera)
// }

// animate()

onMounted(() => {
  canvas.value?.appendChild(renderer.domElement)
  renderer.render(scene, camera)

  // setTimeout(() => {
  //   mesh.position.normalize()
  //   console.log(mesh.position.length())
  //   renderer.render(scene, camera)
  // }, 1000)
})
</script>
